<template>
  <a-modal
    destroyOnClose
    :visible="visible"
    :title="title"
    @update:visible="update"
    @ok="ok"
  >
    <Form ref="formRef" v-model:form="form" :formList="formList" :btnConfig="null" />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, defineEmits, watch } from "vue";
import Form from "@/components/Form";
import { formList } from "./href";
import { roleApi } from "@/api/role";
import { message } from "ant-design-vue";
const emits = defineEmits(["update:visible", "reload"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tempData: {
    default: {},
  },
});
const { visible, tempData } = toRefs(props);
const title = ref("提示");
const formRef = ref();
const form = ref({});

watch(visible, (e) => {
  if (!e) return;
  const { id } = tempData.value;
  if (e.id) title.value = "修改角色";
  else title.value = "新增角色";
  form.value = tempData.value;
});

function update(e) {
  emits("update:visible", e);
}
async function ok() {
  await formRef.value.save();
  await roleApi.edit(form.value);
  emits("update:visible", false);
  emits("reload");
}
</script>

<style lang="less" scoped></style>
